<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>恭喜发财</title>
    <meta name= "author" content="lzd" >
    <meta name= "viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="./static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="./static/css/main.css">
  </head>
<body>
<script type="text/javascript">
!function(e,t){var n=e.documentElement,i="orientationchange"in window?"orientationchange":"resize",d=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,function(){var t=n.clientWidth;t&&(t>=750?(t=750,e.body.style.width="750px"):e.body.style.width=t+"px",n.style.fontSize=100*(t/750)+"px",n.dataset.width=t,n.dataset.percent=100*(t/750))});d(),e.documentElement.classList.add("iosx"+t.devicePixelRatio),e.addEventListener&&t.addEventListener(i,d,!1)}(document,window)
</script>

<div id="app" class="p-r">

<div style="z-index:9999999;position:absolute;left:-999rem;">
  <div id="zd_qrcode" style="border:1px red solid;"></div>
  <canvas id="qr-canvas" width="40" height="30"></canvas>
  <input type="file" id="handleQR"  accept="image/*" />
</div>
    <!-- 默认上传input -->
    <input id="upload" class="p-a" type="file" accept="image/*" />

    <!-- loading -->
    <div class="loadingDiv">
        <div class="flex">
            <span class="wpr">
              <img src="./static/img/icon-loading.png" class='loadingIcon' alt="">
                loading...
            </span>
        </div>
    </div>

    <!-- 1 引导页 -->
    <div id="firstPage" class="p-r" style="z-index:111;display:-none">
        <div class="tit p-a">
          <div class="t1_wpr">
            <img src="./static/img/first_t1.png" class="t1 animated" alt="">
          </div>
          <div class="t2_wpr">
            <img src="./static/img/first_t2.png" class="t2 animated" alt="">
          </div>
        </div>
        <div class="guide">
            <!-- <img src="./static/img/firstPic.jpg" width="100%"> -->
        </div>
        <div class="wpr p-a">
            已有<var id="joinNum">0</var>人参加<br/>
            收到红包总额已突破<var id="targetNum">0</var>
            <span class="chooseBtn">我也要做拜年自拍</span>
        </div>
    </div>

    <!--  转换图片时需要 -->
    <div id="megaPixImage"></div>
    <!--  转换图片时需要 -->
    <div id="megaPixImage"></div>
    <!-- 生成器 -->
    <canvas id="cropCanvas" class="p-a" style="z-index:1;left:-999rem;background-color:rgba(0,0,0,0)" width="420" height="420"></canvas>

    <div id="cropSection" style="display:none;z-index:222;overflow-y:scroll;background-color:#fff;" >

        <!-- 选择各种主题style -->
        <div class="theme" style="z-index:2;">
          <!-- themebg -->
            <div id="theme_bg" class="p-r">
                <img src="" id="themeBgImg" style="width:100%;">
                <img id="eCode" class="ecode p-a" style="right:15.06%;bottom:.6rem;" src="./static/img/upqr.jpg" alt="">
            </div>
             <!-- themehead -->
            <div id="cropLayer" class="p-a" style="">
                <!-- <img src="" class="themeHead" data-width="0" alt=""> -->
                <div class="wpr p-a" style="">
                    <img id="cropImg" class="p-a" style="top:0;width:100%" src="">
                </div>
            </div>
            <div id="dropArea" class="defaultPic p-a"></div>
        </div>


        <div class="styleChoose p-r" id="theme_foot">
          <img src="" alt="">
            <!-- <a href="javascript:void(0)" id="reChoose">重新选择</a> -->
            <a href="javascript:void(0)" id="toNext" style="position:absolute;left:-999rem;">下一步</a>
            <div class="wpr p-a">
              <div class="">
                  <div class="item" id="reChoose"><var>换张<br/>照片</var></div>
                  <span>
                    <div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
                  </span>
              </div>
            </div>
        </div>


    </div>

    <div id="proSection" style="display:none;">
        <div class="view">
            <img src="" alt="">
        </div>
        <div class="content p-r">
            <img src="" width="100%" alt="">
            <div class="wpr p-a">
              <div><span class="save">保存</span></div>
              <div><span class="share">分享</span></div>
            </div>
        </div>
        <div class="nextGuide">
          <div class="wpr p-r">
            <div class="paw p-a"><img src="./static/img/paw.png" alt=""></div>
            <div class="paw2 p-a"><img src="./static/img/paw.png" alt=""></div>
            <div class="flow p-a"><img src="./static/img/flower.png" alt=""></div>
            <div class="p1">
              存好啦~<br/>分享到朋友圈领红包吧
            </div>
            <div class="confirm">
              <span>确定</span>
            </div>
          </div>
        </div>

    </div>

    <div id="qrGuide" style="z-index:333;display:none;">
        <div class="wpr">
          <div class="return">
            返回
          </div>
          <a href="javascript:void(0)" class="btn">上传微信收款二维码</a>
          <img src="" style="width:6.87rem" alt="">
          <p>
            - 1 -<br/>
            点击微信右上角“+”，弹出框点击“收付款”
          </p>
          <img src="" style="width:4.32rem" alt="">
          <p>
            - 2 -<br/>
            点击“二维码收款”
          </p>
          <img src="" style="width:4.65rem" alt="">
          <p>
            - 3 -<br/>
            点击“保存收款码”
          </p>
          <img src="" style="width:4rem" alt="">
          <p>
            - 4 -<br/>
            收款码将会保存在相册里
          </p>
          <img src="" style="width:4.26rem" alt="">

          <a href="javascript:void(0)" class="btn">上传微信收款二维码</a>
        </div>
    </div>

    <!-- ./static/test.mp3 -->
    <audio src="" controls loop id='audio' style="position:absolute;left:-999rem;"></audio>
    <div id="audio_control" class='p-a'>
      <img src="./static/img/audio_Icon.png" class="run" alt="">
    </div>

</div>

<script>

function loadScript(_src,cb){
    var script = document.createElement('script');
    script.type="text/javascript";
    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded' || script.readyState == 'complete'){
                script.onreadystatechange = null;cb && cb();
            }
        }
    } else {
        script.onload = function(){cb && cb()};
    }
    script.src=_src;document.getElementsByTagName('head')[0].appendChild(script);
}

!function(){
  var auBtn = document.querySelector('#audio_control'),
      audio = document.querySelector('#audio'),
      icon = document.querySelectorAll('#audio_control img')[0],
      playStat = true;
      audio.src = './test.mp3';
      audio.load();
      audio.play();
  auBtn.addEventListener(window.isSupportTouch?'touchend':'click',function(){
    playStat = !playStat;
    if(playStat){
      audio.play()
      icon.style.animationPlayState="running";
      icon.style.WebkitAnimationPlayState="running";
    }else{
      audio.pause()
      icon.style.animationPlayState="paused";
      icon.style.WebkitAnimationPlayState="paused";
    }
  },false)

}()

loadScript('./static/js/count.js',function(){
  // 默认图片
  var defaultbgStatue = false;
  var img = new Image();
  img.onload = function(){
    loadOtherJs();
    img.setAttribute('width','100%')
    document.querySelectorAll('.guide')[0].appendChild(img);
    defaultbgStatue = true;
  }
  img.src = './static/img/firstPic.jpg';
  // number  开始运行
  var targetNum = 499930002,
      joinNum = 321343,
      count = new CountUp('targetNum', 0, targetNum, 0, 1.5),
      join = new CountUp('joinNum', 0, joinNum, 0, 1),
      f_t1 = document.querySelector('#firstPage .t1'),
      f_t2 = document.querySelector('#firstPage .t2');

  var timer = setInterval(function(){
    console.log(defaultbgStatue);
    if(defaultbgStatue){
      clearInterval(timer);

      timer = null;
      document.querySelectorAll('.loadingDiv')[0].style.display='none';
      // 首屏 标题
      f_t1.classList.add('bounceInDown');
      f_t2.classList.add('fadeIn');
      join.start()
      count.start(function(){
        join = count = null;
      });
    }
  },0)
})

function loadOtherJs(){
  var zeptoJsLoaded = false,
      extJsLoad = false,
      globalJsloaded = false,
      mainJsLoaded = false,
      allJsloaded = false;
  var checkAll = function(val){
          console.log("check js this time ok:",val,zeptoJsLoaded , extJsLoad , globalJsloaded , mainJsLoaded);
          if(zeptoJsLoaded && extJsLoad && globalJsloaded && mainJsLoaded){
            console.log('ok 23333');
              setTimeout(function(){
                indexPageReady();
              },0)
              allJsloaded = true;
              checkAll = null;
          }else{return;}
      };
      loadScript('./static/js/zepto.min.js',function(){
          zeptoJsLoaded = true;
          checkAll('zepto');
          loadScript('./static/js/main.js',function(){
          if(zeptoJsLoaded){
              checkAll('main');
              mainJsLoaded = true;
              // transNumber();
          }
      })
      })
      loadScript('./static/js/global.js',function(){
          globalJsloaded = true;
          checkAll('global');
      })
      loadScript('./static/js/ext.js',function(){
          extJsLoad = true;
          checkAll('ext');
      })
      loadScript('./static/js/main.js',function(){
          if(zeptoJsLoaded){
              checkAll('main');
              mainJsLoaded = true;
          }
      })

}


</script>
</body>
</html>
